<!DOCTYPE html>
<html>
<head>
<!-- <style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}	
</style> -->
<link rel="stylesheet" href="styles.css">
<link href="./bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<script src="./bootstrap-5.3.2-dist/js/bootstrap.min.js"></script>
	<div class="cities">
		<h2>成长</h2>
		<p>年轻的时候，总想着改变自己去讨好别人，从别人那里寻找存在感。慢慢长大后才明白，只有做自己的时候，才是最可爱最舒服，也才是最值得被爱的。</p>
		<p>When I was young, I always wanted to change myself to please others and find a sense of existence from others. Slowly grow up to understand, only to be yourself, is the most lovely, the most comfortable, is the most worthy of love.</p>
	</div> 
	<div id="carouselExampleIndicators" class="carousel slide">
		<div class="carousel-indicators">
		  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
		  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
		</div>
		<div class="carousel-inner">
		  <div class="carousel-item active">
			<img src="tupian2.png" class="d-block w-100" alt="tu1">
		  </div>
		  <div class="carousel-item">
			<img src="tupian3.png" class="d-block w-100" alt="tu2">
		  </div>
		  <div class="carousel-item">
			<img src="tupian3.png" class="d-block w-100" alt="tu3">
		  </div>
		</div>
		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
		  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		  <span class="visually-hidden">Previous</span>
		</button>
		<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
		  <span class="carousel-control-next-icon" aria-hidden="true"></span>
		  <span class="visually-hidden">Next</span>
		</button>
	  </div>
	<div class = "mycontainer">
		<div>
			<p>来一张</p>
			<img src="./tupian.jpg" width="200" height="auto"/>
		</div>
		<div>
			<p>再来一张</p>
			<img src="./tupian.jpg" width="200" height="auto"/>
		</div>
		<button type="button" class="btn btn-primary">Primary</button>
		<button type="button" class="btn btn-secondary">Secondary</button>
		<button type="button" class="btn btn-success">Success</button>
		<button type="button" class="btn btn-danger">Danger</button>
		<button type="button" class="btn btn-warning">Warning</button>
		<button type="button" class="btn btn-info">Info</button>
		<button type="button" class="btn btn-light">Light</button>
		<button type="button" class="btn btn-dark">Dark</button>
		<button type="button" class="btn btn-link">Link</button>

		<button type="button" class="btn btn-outline-primary">Primary</button>
		<button type="button" class="btn btn-outline-secondary">Secondary</button>
		<button type="button" class="btn btn-outline-success">Success</button>
		<button type="button" class="btn btn-outline-danger">Danger</button>
		<button type="button" class="btn btn-outline-warning">Warning</button>
		<button type="button" class="btn btn-outline-info">Info</button>
		<button type="button" class="btn btn-outline-light">Light</button>
		<button type="button" class="btn btn-outline-dark">Dark</button>
		<br/><br/>
		<div class="btn-group" role="group" aria-label="Basic outlined example">
			<button type="button" class="btn btn-outline-primary">Left</button>
			<button type="button" class="btn btn-outline-primary">Middle</button>
			<button type="button" class="btn btn-outline-primary">Right</button>
		</div>
		<br/><br/>
		<div class="mb-3">
			<label for="exampleFormControlInput1" class="form-label">Email address</label>
			<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
		  </div>
		  <br/><br/><br/><br/>
		<div class="mb-3">
			<label for="inputPassword5" class="form-label">Password</label>
		<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
		<div id="passwordHelpBlock" class="form-text">
		Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
		</div>
		</div>
		<div class="mb-3">
			<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
			<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
		</div>
	</div>
	<div class="tablecontainer">
		<table>
			<thead>
			  <tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</th>
			  </tr>
			</thead>
			<tbody>
			  <tr>
				<th scope="row">1</th>
				<td>Mark</td>
				<td>Otto</td>
				<td>@mdo</td>
			  </tr>
			  <tr>
				<th scope="row">2</th>
				<td>Jacob</td>
				<td>Thornton</td>
				<td>@fat</td>
			  </tr>
			  <tr>
				<th scope="row">3</th>
				<td colspan="2">Larry the Bird</td>
				<td>@twitter</td>
			  </tr>
			</tbody>
		  </table>
	</div>
</body>
</html>
